<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="门店设置" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>
		
		<view class="mt20" style="padding: 20rpx 30rpx ;background-color: #ffffff;">
		
			<view  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">门店名称</view>
				<view class="grey-color">瑞安服饰经营部</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">门店logo</view>
				<view>
					<u-avatar :src="src"></u-avatar>
				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">门店详图</view>
				<view style="width:300rpx">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in list" :key="index">

							<u--image :showLoading="true" :src="item" width="40px" height="40px" @click="imageClick()"></u--image>

						</view>
					</u-scroll-list>
				</view>
				
			</view>
			
		</view>
	
		<view class="mt20" style="padding: 20rpx 30rpx ;background-color: #ffffff;">
		
			<view  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">营业状态</view>
				<view class="flex-center" style="display: flex;">
					<view>
						<u-badge :isDot="true" bgColor="green" ></u-badge>
					</view>
					<view class="grey-color" style="margin-left: 10rpx;">
					营业中
					</view>
				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">联系电话</view>
				<view class="grey-color" style="display: flex;" @click="phoneopen">
					<view >1399999999</view>
					<u-icon name="arrow-right"></u-icon>

				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">店铺地址</view>
				<view class="grey-color" style="display: flex;" @click="dianpuview">
					<view >西南方向60米</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">营业时间</view>
				<view class="grey-color" style="display: flex;" @click="shijianview">
					<view >09:00-21:00</view>
					<u-icon name="arrow-right"></u-icon>
					
				</view>
				
			</view>
			
			<view class="mt20"  style="display: flex;justify-content: space-between;align-items: center;">
				<view style="width:300rpx">签约查询</view>
				<view  @click="shopopen">
					<u-icon name="arrow-right"></u-icon>

				</view>
				
			</view>
			
		</view>
		
		<u-popup mode="center" :show="phoneshow" @close="phoneclose" @open="phoneopen" :round="8">
			<view style="width:600rpx;padding:20rpx">
				<view class="flex-center" style="display: flex;">修改联系电话</view>
				<view>现联系电话：13777777777</view>
				<view>
					<u--input
					    placeholder="请输入内容"
					    border="bottom"
					    clearable
					  ></u--input>
				</view>
				<u-line color="red"></u-line>
				<view>
					<u-button type="warning" text="确认修改" @click="changePhone"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="bottom" :show="shopshow" @close="shopclose" @open="shopopen" :closeable="true" :round="8">
			<view style="padding:20rpx">
				<view style="font-size: 40rpx;">签约信息</view>
				<u-line margin="10rpx 0"></u-line>
				<view>
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view>签约时间</view>
						<view class="grey-color" >
							2023-7-23 —— 2024-8-23
						</view>
					</view>
					<view class="mt20" style="display: flex;justify-content: space-between;align-items: center;">
						<view>积分结算模式</view>
						<view class="grey-color" >全剧模式</view>
					</view>
					<view class="mt20" style="display: flex;justify-content: space-between;align-items: center;">
						<view>积分比例</view>
						<view class="grey-color" >20%</view>
					</view>
				</view>
			</view>
			<view>如需修改店铺收款积分模式，请联系客服或当地商务人员</view>
		</u-popup>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				albumWidth: 0,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
                    'https://cdn.uviewui.com/uview/album/2.jpg',
                    'https://cdn.uviewui.com/uview/album/3.jpg',
                    'https://cdn.uviewui.com/uview/album/4.jpg',
                    'https://cdn.uviewui.com/uview/album/5.jpg',
                    'https://cdn.uviewui.com/uview/album/6.jpg',
                    'https://cdn.uviewui.com/uview/album/7.jpg',
                    'https://cdn.uviewui.com/uview/album/8.jpg',
                    'https://cdn.uviewui.com/uview/album/9.jpg',
                    'https://cdn.uviewui.com/uview/album/10.jpg'
				],
				phoneshow: false,
				shopshow: false,
				timeshow: false

			}
		},
		onLoad(){
			
		},
		methods: {
			imageClick(){
				uni.previewImage({
				    urls: this.list
				})
			},
			phoneopen() {
			    // console.log('open');
				this.phoneshow = true
			},
			phoneclose() {
			  this.phoneshow = false
			  // console.log('close');
			},
			shopopen() {
			    // console.log('open');
				this.shopshow = true
			},
			shopclose() {
			  this.shopshow = false
			  // console.log('close');
			},
			dianpuview() {
			    this.$Router.push({
			    	path: '/pages/other/dianpu'
			    })
			},
			shijianview() {
			  this.$Router.push({
			  	path: '/pages/other/shijian'
			  })
			},
			changePhone(){
				console.log("this is change phone")
			}
		}
	}
</script>

<style scoped>
.grey-color{
	color:#666666
}
/deep/ .u-input{
	padding:24rpx 0 !important
	
}
</style>